<template>
  <div :style="{ width: props.width, height: props.height }">
    <el-checkbox-group
      :style="{ width: props.width, height: props.height }"
      v-if="states.type == 'checkbox'"
      v-model="states.values"
      @change="handleChange"
      class="check"
      :disabled="states.disabled"
      :size="states.size"
    >
      <el-checkbox
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :border="states.border"
        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>

    <el-checkbox-group
      :style="{ width: props.width, height: props.height }"
      v-if="states.type == 'checkboxBtn'"
      v-model="states.values"
      @change="handleChange"
      :text-color="states.textColor"
      :disabled="states.disabled"
      :fill="states.fill"
    >
      <el-checkbox-button
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</el-checkbox-button
      >
    </el-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useEventHandle } from "@renderer/utils/componentEvent";
const { handleClickQuery } = useEventHandle();
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
let options = ref<any[]>([]);
const init = () => {
  options.value = props.responseData as any;
};
watch(
  () => props.responseData,
  () => {
    if (props.responseData && props.responseData.length) {
      init();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
onMounted(() => {
  if (props.responseData && props.responseData.length > 0) {
    options.value = props.responseData as any;
  } else {
    options.value = props.models.data;
  }
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

const handleChange = (value) => {
  console.log("value", value);
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, {
        value: JSON.stringify(value),
      });
    }
  });
};
</script>

<style scoped lang="scss">
:deep(.check .el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: v-bind("states.fill") !important;
  border-color: v-bind("states.fill") !important;
}
:deep(.check .el-checkbox__label) {
  color: v-bind("states.textColor") !important;
  font-size: v-bind("states.fontSize") !important;
}
</style>
